<template>
  <div id="app">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" v-show="isShowNavigationBar">
      <van-nav-bar
        :title="pageTitle"
        :left-arrow="showBackArrow"
        @click-left="onClickLeft"
      />
    </van-pull-refresh>
    <!-- <van-icon name="chat-o" color="#1989fa" /><van-icon name="shopping-cart-o" /> -->
    <router-view></router-view>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" to="/Shopcar"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item icon="friends-o" to="/Personalcenter"
        >个人中心</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      active: 0,
      pageTitle: "我的标题",
      showBackArrow: true,
      isShowNavigationBar: true,
      isShowTabBar: false,
      isLoading: false,
      network: navigator.online,
    };
  },

  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },

    // 监听网络
    UpdateNetworkStatus(e) {
      (this.network = e), type === "online" ? true : false;
    },
  },

  watch: {
    $route: {
      handler: function (route) {
        if (route.meta) {
          let { pageTitle, mainPage, isShowNavigationBar, pageTitle2 } =
            route.meta;
          this.pageTitle = pageTitle; //页面标题
          this.showBackArrow = mainPage ? false : tr;
          this.isShowNavigationBar = isShowNavigationBar; // 显示导航栏
          this.isShowTabBar = mainPage ? false : true; // 选项卡栏
        }
      },
      immediate: true, // immediate立即执行
    },
    network() {
      this.network === false &&
        this.$toast.fali("网络已断开，请检查网络是否正常");
      this.network === true && this.$toast.success("网络以链接");
    },
    mounted() {
      window.addEventListener("online", this.UpdateNetworkStatus);
      window.addEventListener("offLine", this.UpdateNetworkStatus);
    },
  },
};
</script>

<style lang="scss">
#app {
  min-width: 320px;
  max-width: 750px;
  margin: auto;
  // #navbar {
  //   background-color: 222, 0, 0;
  // }
  .van-tabbar {
    min-width: 320px;
    max-width: 750px;
    left: 50%;
    transform: translateX(-50%);
    background-color: brown;

  }
}
</style>
